import { useState, useEffect } from 'react'
import styles from './index.module.css'

interface City {
  name: string
  districts: string[]
}

interface LocationData {
  latitude: number
  longitude: number
  address: string
  city: string
  district: string
}

function Index() {
  const [selectedCity, setSelectedCity] = useState('北京')
  const [selectedDistrict, setSelectedDistrict] = useState('全部')
  const [currentLocation, setCurrentLocation] = useState('北京')
  const [loading, setLoading] = useState(false)
  const [realLocationData, setRealLocationData] = useState<LocationData | null>(null)

  // 高德地图API Key
  const AMAP_KEY = '8d4b9630860e3a0920b25c68be7cddb8'

  // 城市数据
  const cities: City[] = [
    {
      name: '北京',
      districts: ['全部', '东城', '西城', '崇文', '宣武', '朝阳', '丰台', '石景山', '海淀', '门头沟', '房山', '通州', '顺义', '昌平', '大兴', '怀柔', '平谷', '密云', '延庆']
    },
    {
      name: '天津',
      districts: ['全部', '和平', '河东', '河西', '南开', '河北', '红桥', '东丽', '西青', '津南', '北辰', '武清', '宝坻', '滨海新区', '宁河', '静海', '蓟州']
    },
    {
      name: '上海',
      districts: ['全部', '黄浦', '徐汇', '长宁', '静安', '普陀', '虹口', '杨浦', '闵行', '宝山', '嘉定', '浦东', '金山', '松江', '青浦', '奉贤', '崇明']
    },
    {
      name: '重庆',
      districts: ['全部', '万州', '涪陵', '渝中', '大渡口', '江北', '沙坪坝', '九龙坡', '南岸', '北碚', '綦江', '大足', '渝北', '巴南', '黔江', '长寿', '江津', '合川', '永川', '南川', '璧山', '铜梁', '潼南', '荣昌', '开州', '梁平', '武隆', '城口', '丰都', '垫江', '忠县', '云阳', '奉节', '巫山', '巫溪', '石柱', '秀山', '酉阳', '彭水']
    },
    {
      name: '河北',
      districts: ['全部', '石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州', '廊坊', '衡水']
    },
    {
      name: '山西',
      districts: ['全部', '太原', '大同', '阳泉', '长治', '晋城', '朔州', '晋中', '运城', '忻州', '临汾', '吕梁']
    },
    {
      name: '内蒙古',
      districts: ['全部', '呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '兴安盟', '锡林郭勒盟', '阿拉善盟']
    },
    {
      name: '辽宁',
      districts: ['全部', '沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛']
    },
    {
      name: '吉林',
      districts: ['全部', '长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边朝鲜族自治州']
    },
    {
      name: '黑龙江',
      districts: ['全部', '哈尔滨', '齐齐哈尔', '鸡西', '鹤岗', '双鸭山', '大庆', '伊春', '佳木斯', '七台河', '牡丹江', '黑河', '绥化', '大兴安岭']
    },
    {
      name: '江苏',
      districts: ['全部', '南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁']
    },
    {
      name: '浙江',
      districts: ['全部', '杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水']
    },
    {
      name: '安徽',
      districts: ['全部', '合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '阜阳', '宿州', '六安', '亳州', '池州', '宣城']
    },
    {
      name: '福建',
      districts: ['全部', '福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德']
    },
    {
      name: '江西',
      districts: ['全部', '南昌', '景德镇', '萍乡', '九江', '新余', '鹰潭', '赣州', '吉安', '宜春', '抚州', '上饶']
    },
    {
      name: '山东',
      districts: ['全部', '济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '临沂', '德州', '聊城', '滨州', '菏泽']
    },
    {
      name: '河南',
      districts: ['全部', '郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁', '新乡', '焦作', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店', '济源']
    },
    {
      name: '湖北',
      districts: ['全部', '武汉', '黄石', '十堰', '宜昌', '襄阳', '鄂州', '荆门', '孝感', '荆州', '黄冈', '咸宁', '随州', '恩施土家族苗族自治州', '仙桃', '潜江', '天门', '神农架']
    },
    {
      name: '湖南',
      districts: ['全部', '长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
    },
    {
      name: '广东',
      districts: ['全部', '广州', '韶关', '深圳', '珠海', '汕头', '佛山', '江门', '湛江', '茂名', '肇庆', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮']
    },
    {
      name: '广西',
      districts: ['全部', '南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '百色', '贺州', '河池', '来宾', '崇左']
    },
    {
      name: '海南',
      districts: ['全部', '海口', '三亚', '三沙', '儋州', '五指山', '琼海', '文昌', '万宁', '东方', '定安', '屯昌', '澄迈', '临高', '白沙', '昌江', '乐东', '陵水', '保亭', '琼中']
    },
    {
      name: '四川',
      districts: ['全部', '成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳', '广元', '遂宁', '内江', '乐山', '南充', '眉山', '宜宾', '广安', '达州', '雅安', '巴中', '资阳', '阿坝', '甘孜', '凉山']
    },
    {
      name: '贵州',
      districts: ['全部', '贵阳', '六盘水', '遵义', '安顺', '毕节', '铜仁', '黔西南', '黔东南', '黔南']
    },
    {
      name: '云南',
      districts: ['全部', '昆明', '曲靖', '玉溪', '保山', '昭通', '丽江', '普洱', '临沧', '楚雄', '红河', '文山', '西双版纳', '大理', '德宏', '怒江', '迪庆']
    },
    {
      name: '西藏',
      districts: ['全部', '拉萨', '日喀则', '昌都', '林芝', '山南', '那曲', '阿里']
    },
    {
      name: '陕西',
      districts: ['全部', '西安', '铜川', '宝鸡', '咸阳', '渭南', '延安', '汉中', '榆林', '安康', '商洛']
    },
    {
      name: '甘肃',
      districts: ['全部', '兰州', '嘉峪关', '金昌', '白银', '天水', '武威', '张掖', '平凉', '酒泉', '庆阳', '定西', '陇南', '临夏', '甘南']
    },
    {
      name: '青海',
      districts: ['全部', '西宁', '海东', '海北', '黄南', '海南', '果洛', '玉树', '海西']
    },
    {
      name: '宁夏',
      districts: ['全部', '银川', '石嘴山', '吴忠', '固原', '中卫']
    },
    {
      name: '新疆',
      districts: ['全部', '乌鲁木齐', '克拉玛依', '吐鲁番', '哈密', '昌吉', '博尔塔拉', '巴音郭楞', '阿克苏', '克孜勒苏', '喀什', '和田', '伊犁', '塔城', '阿勒泰', '石河子', '阿拉尔', '图木舒克', '五家渠', '北屯', '铁门关', '双河', '可克达拉', '昆玉', '胡杨河']
    }
  ]

  // 获取当前选中城市的区县列表
  const currentCityData = cities.find(city => city.name === selectedCity) || cities[0]

  // 处理城市选择
  const handleCitySelect = (cityName: string) => {
    setSelectedCity(cityName)
    setSelectedDistrict('全部') // 重置区县选择
    setCurrentLocation(cityName) // 更新当前定位显示
    
    // 将手动选择的城市信息存储到本地存储
    localStorage.setItem('currentCity', cityName)
    localStorage.setItem('selectedCity', cityName)
    localStorage.setItem('selectedDistrict', '全部')
    console.log('手动选择城市已保存到本地存储:', cityName)
  }

  // 处理区县选择
  const handleDistrictSelect = (districtName: string) => {
    setSelectedDistrict(districtName)
    // 更新当前定位显示，包含城市和区县
    if (districtName === '全部') {
      setCurrentLocation(selectedCity)
    } else {
      setCurrentLocation(`${selectedCity} ${districtName}`)
    }
    
    // 将区县选择信息存储到本地存储
    localStorage.setItem('currentCity', selectedCity)
  
  }


  // 使用高德地图API进行IP定位
  const getLocationByIP = async () => {
    console.log('开始高德地图IP定位...')
    
    try {
      const amapUrl = `https://restapi.amap.com/v3/ip?key=${AMAP_KEY}&output=json`
      console.log('请求高德API:', amapUrl)
      
      const response = await fetch(amapUrl, {
        method: 'GET',
        mode: 'cors',
        headers: {
          'Accept': 'application/json',
        }
      })
      
      const data = await response.json()
      console.log('高德API响应:', data)
      
      if (data.status === '1' && data.city) {
        console.log('高德IP定位成功，城市:', data.city)
        setCurrentLocation(data.city)
        setSelectedCity(data.city)
        setSelectedDistrict('全部')
        
        // 将城市信息存储到本地存储
        localStorage.setItem('currentCity', data.city)
        localStorage.setItem('selectedCity', data.city)
        localStorage.setItem('selectedDistrict', '全部')
        console.log('城市信息已保存到本地存储:', data.city)
        
        return true
      } else {
        console.error('高德API返回错误:', data.info)
        console.error('错误代码:', data.infocode)
        
        // 根据错误类型给出具体提示
        if (data.info === 'USERKEY_PLAT_NOMATCH') {
          console.error('API Key平台不匹配，请检查高德地图控制台配置')
          setCurrentLocation('API配置错误，请手动选择城市')
        } else if (data.info === 'INVALID_USER_KEY') {
          console.error('API Key无效，请检查Key是否正确')
          setCurrentLocation('API Key无效，请手动选择城市')
        } else {
          setCurrentLocation('定位失败，请手动选择城市')
        }
        
        setSelectedCity('北京')
        setSelectedDistrict('全部')
        return false
      }
    } catch (err) {
      console.log('高德API请求失败:', err)
      setCurrentLocation('请手动选择城市')
      setSelectedCity('北京')
      setSelectedDistrict('全部')
      return false
    }
  }

  // 获取真实位置数据
  const getCurrentLocation = async () => {
    setLoading(true)
    console.log('开始获取真实位置...')
    
    // 首先尝试GPS定位获取精确位置
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        async (position) => {
          const { latitude, longitude } = position.coords
          console.log('GPS定位成功，坐标:', latitude, longitude)
          
          try {
            // 使用高德地图逆地理编码API获取真实地址
            const addressInfo = await getAddressFromCoords(latitude, longitude)
            
            const locationData: LocationData = {
              latitude,
              longitude,
              address: addressInfo.formatted_address,
              city: addressInfo.addressComponent.city || addressInfo.addressComponent.province,
              district: addressInfo.addressComponent.district
            }
            
                  console.log('真实位置数据:', locationData)
                  setRealLocationData(locationData)
                  setCurrentLocation(locationData.city)
                  setSelectedCity(locationData.city)
                  setSelectedDistrict(locationData.district)
                  
                  // 将GPS定位的城市信息存储到本地存储
                  localStorage.setItem('currentCity', locationData.city)
                  localStorage.setItem('selectedCity', locationData.city)
                  localStorage.setItem('selectedDistrict', locationData.district)
                  console.log('GPS定位城市信息已保存到本地存储:', locationData.city)
          } catch (err) {
            console.error('地址解析失败，使用IP定位:', err)
            // GPS成功但地址解析失败，使用IP定位
            await getLocationByIP()
          }
          setLoading(false)
        },
        async (error) => {
          console.log('GPS定位失败，使用IP定位:', error.message)
          // GPS失败，使用IP定位
          await getLocationByIP()
          setLoading(false)
        },
        {
          enableHighAccuracy: true, // 启用高精度
          timeout: 15000, // 增加超时时间
          maximumAge: 60000 // 1分钟内的缓存
        }
      )
    } else {
      // 浏览器不支持GPS，直接使用IP定位
      await getLocationByIP()
      setLoading(false)
    }
  }

  // 使用高德地图逆地理编码API获取真实地址信息
  const getAddressFromCoords = async (lat: number, lng: number) => {
    const url = `https://restapi.amap.com/v3/geocode/regeo?key=${AMAP_KEY}&location=${lng},${lat}&extensions=all&output=json`
    
    console.log('请求逆地理编码API:', url)

    try {
      const response = await fetch(url, {
        method: 'GET',
        mode: 'cors',
        headers: {
          'Accept': 'application/json',
        }
      })
      
      if (!response.ok) {
        throw new Error(`网络请求失败: ${response.status}`)
      }

      const data = await response.json()
      console.log('逆地理编码API响应:', data)

      if (data.status === '1' && data.regeocode) {
        console.log('地址解析成功:', data.regeocode.formatted_address)
        return data.regeocode
      } else {
        console.error('逆地理编码API错误:', data.info)
        console.error('错误代码:', data.infocode)
        console.error('完整响应:', data)
        
        // 根据错误类型给出具体提示
        if (data.info === 'USERKEY_PLAT_NOMATCH') {
          console.error('逆地理编码API Key平台不匹配')
        } else if (data.info === 'INVALID_USER_KEY') {
          console.error('逆地理编码API Key无效')
        }
        
        throw new Error(data.info || '获取地址信息失败')
      }
    } catch (err) {
      console.error('逆地理编码失败:', err)
      throw err
    }
  }

  // 刷新定位
  const handleRefreshLocation = () => {
    getCurrentLocation()
  }


  // 页面加载时先从本地存储读取城市信息，然后获取位置
  useEffect(() => {
    // 先从本地存储读取城市信息
    const savedCity = localStorage.getItem('currentCity')
    const savedSelectedCity = localStorage.getItem('selectedCity')
    const savedSelectedDistrict = localStorage.getItem('selectedDistrict')
    
    if (savedCity && savedSelectedCity) {
      console.log('从本地存储读取城市信息:', savedCity)
      setCurrentLocation(savedCity)
      setSelectedCity(savedSelectedCity)
      setSelectedDistrict(savedSelectedDistrict || '全部')
    }
    
    // 然后获取最新位置
    getCurrentLocation()
  }, [])

  // 直接显示城市选择界面
  return (
    <div className={styles.cityPage}>
      {/* 头部 */}
      <div className={styles.cityTopBar}>
        <div className={styles.cityBack} onClick={() => window.history.back()}>
          ←
        </div>
        <div className={styles.cityTitle}>选择城市</div>
        <div className={styles.cityRefresh} onClick={handleRefreshLocation}>
          刷新定位
        </div>
        
      </div>

      {/* 当前定位 */}
      <div className={styles.cityLocation}>
        {loading ? (
          <span>正在获取真实位置...</span>
        ) : (
          <div>
            <div>当前定位: {currentLocation}</div>
            {realLocationData && (
              <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
                <div>精确坐标: {realLocationData.latitude.toFixed(6)}, {realLocationData.longitude.toFixed(6)}</div>
                <div>详细地址: {realLocationData.address}</div>
                <div>区县: {realLocationData.district}</div>
              </div>
            )}
          </div>
        )}
      </div>

      {/* 主要内容区域 */}
      <div className={styles.cityMain}>
        {/* 左侧城市列表 */}
        <div className={styles.cityLeft}>
          {cities.map((city) => (
            <div
              key={city.name}
              className={`${styles.cityItem} ${selectedCity === city.name ? styles.cityActive : ''}`}
              onClick={() => handleCitySelect(city.name)}
            >
              {city.name}
            </div>
          ))}
        </div>

        {/* 右侧区县列表 */}
        <div className={styles.cityRight}>
          <div
            className={`${styles.districtItem} ${selectedDistrict === '全部' ? styles.districtActive : ''}`}
            onClick={() => handleDistrictSelect('全部')}
          >
            全部
          </div>
          {currentCityData.districts.slice(1).map((district) => (
            <div
              key={district}
              className={`${styles.districtItem} ${selectedDistrict === district ? styles.districtActive : ''}`}
              onClick={() => handleDistrictSelect(district)}
            >
              {district}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default Index
